<!-- @format -->

<template>
  <table border="1">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>头像</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item, index) in arr"
        :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 
              （1）头像这一列的标签不确定(既支持显示头像地址，又支持显示图片)，
                   用<slot/>占位
              （2）头像这一列默认显示头像地址，因此这里为slot设置了默认内容
           -->
          <slot :imgUrl="item.headImgUrl">{{ item.headImgUrl }}</slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    props: {
      arr: {
        type: Array,
        required: true
      }
    }
  }
</script>
